<template>  
    <div>  
        <div style="margin-bottom: 20px;">  
            <el-input v-model="searchQuery" placeholder="关键词搜索" style="width: 300px; margin-right: 10px;" />  
            <el-button type="primary" @click="fetchKsData">查询</el-button>  
        </div>  

        <el-table :data="paginatedData" border @selection-change="handleKsSelectionChange" style="height: 400px; width: 100%; overflow: auto;">  
            <el-table-column type="selection" width="55" />  
            <el-table-column prop="pp_code" label="品牌编码" />  
            <el-table-column prop="pp_name" label="品牌名称" />  
            <el-table-column prop="pp_jc" label="品牌简称" />  
            <el-table-column prop="pp_ywmc" label="英文名称" />  
        </el-table>  

        <div style="margin-top: 10px; text-align: right;">  
            <el-button type="default" @click="resetSelection">反选</el-button>  
        </div>  

        <div style="margin-top: 20px; text-align: center;">  
            <span>共 {{ totalItems }} 条，当前第 {{ currentPage }} 页</span>  
            <el-pagination  
                @current-change="handlePageChange"  
                :current-page="currentPage"  
                :page-size="pageSize"  
                :total="totalItems"  
                layout="total, prev, pager, next, jumper"  
            />  
        </div>  

        <div style="margin-top: 20px;">  
            <el-button type="success" @click="cancelSelection">取消</el-button>  
            <el-button type="success" style="margin-left: 10px;" @click="confirmSelection">确认</el-button>  
        </div>  
    </div>  
</template>  

<script>  
import { ref, computed } from 'vue';  
import axios from 'axios';  
import { ElMessage } from 'element-plus';  

export default {  
    setup(props, { emit }) {  
        const ksTableData = ref([]);  
        const searchQuery = ref('');  
        const currentPage = ref(1);  
        const pageSize = ref(5);  
        const totalItems = ref(0);  
        const selectedIds = ref([]);  

        // 常量  
        const API_URL = '/api/PP/GetPP?state=1';  
        
        // 获取品牌数据  
        const fetchKsData = async () => {  
            try {  
                const { data } = await axios.get(API_URL);  
                ksTableData.value = data;  
                totalItems.value = data.length; // 更新总条数  
            } catch (error) {  
                console.error('获取品牌数据失败', error);  
                ElMessage.error('加载品牌数据失败，请稍后再试');  
            }  
        };  

        // 处理表格选中变化  
        const handleKsSelectionChange = (selectedItems) => {  
            selectedIds.value = selectedItems.map(item => item.pp_code);  
        };  

        // 过滤和分页数据  
        const paginatedData = computed(() => {  
            const searchTerm = searchQuery.value.toLowerCase();  
            const filteredData = ksTableData.value.filter(item => {  
                return [item.pp_code, item.pp_name, item.pp_jc, item.pp_ywmc]  
                    .some(field => field.toLowerCase().includes(searchTerm));  
            });  

            // 计算分页数据  
            const start = (currentPage.value - 1) * pageSize.value;  
            return filteredData.slice(start, start + pageSize.value);  
        });  

        const resetSelection = () => {  
            const allIds = paginatedData.value.map(item => item.pp_code);  
            selectedIds.value = allIds.filter(id => !selectedIds.value.includes(id));  
        };  

        const confirmSelection = () => {  
            emit('selection-confirmed', selectedIds.value);  
        };  

        const cancelSelection = () => {  
            emit('cancel-selection');  
        };  

        const handlePageChange = (page) => {  
            currentPage.value = page;  
        };  

        // 初始数据加载  
        fetchKsData();  

        return {  
            handleKsSelectionChange,  
            ksTableData,  
            searchQuery,  
            paginatedData,  
            resetSelection,  
            confirmSelection,  
            cancelSelection,  
            currentPage,  
            pageSize,  
            totalItems,  
            handlePageChange  
        };  
    }  
}  
</script>  

<style scoped>  
/* 添加适当的样式以匹配设计 */  
</style>